{% extends 'base.html' %}
{% block title %}
    <h2>脚本管理</h2>
{% endblock %}
{% block content %}
    <meta name="csrf-token" content="{{ csrf_token }}">
    <form class="layui-form layui-row layui-col-space16">
        <div class="layui-col-md4">
            <div class="layui-input-wrap">

                <input type="text" name="playbook_search" value="" placeholder="搜索脚本名称" class="layui-input"
                       lay-affix="clear">
            </div>
        </div>


        <div class="layui-btn-container layui-col-xs12 layui-col-md4">
            <button class="layui-btn" lay-submit lay-filter="table-search">搜索</button>
            <button type="reset" class="layui-btn layui-btn-primary">清空</button>
        </div>
    </form>
    <table class="layui-hide" id="test" lay-filter="test"></table>


    <script>

        layui.use(['table', 'dropdown'], function () {

            var table = layui.table;
            var dropdown = layui.dropdown;
            var form = layui.form
            // 单元格事件处理
            table.on('tool(test)', function (obj) {
                // 删除palybook
                if (obj.event == 'delete') {
                    if (confirm('确定要删除吗？')) {  // 原生 confirm 弹窗
                        // 发送 AJAX DELETE 请求
                        $.ajax({
                            url: `/scripts/delete/${obj.data.id}/`,  // 视图对应的 URL
                            type: 'POST',        // 请求类型
                            headers: {
                                'X-CSRFToken': $('meta[name="csrf-token"]').attr('content')  // 正确获取 token
                            },
                            success: function (response) {
                                console.log(response.status)
                                if (response.status === 'success') {
                                    //  重载
                                    table.reload('test')
                                    {#alert('删除成功');#}
                                }
                            },
                        });
                    }
                }
                // 查看Playbook详情
                if (obj.event == "update") {
                    console.log(obj.data.id)
                    layer.open({
                        type: 2, // page 层类型
                        area: ['700px', '600px'],
                        title: '编辑Playbook',
                        scrollbar: false,
                        maxmin: true, // 允许全屏最小化
                        content: '/scripts/update/' + obj.data.id,
                        end: function () {
                            // 在这里重载表格

                            layui.table.reload('test'); // 'test' 是你 table.render({ elem: "#test" }) 中的 elem ID
                        }
                    });

                }
                if (obj.event == "detail") {
                    layer.open({
                        type: 2, // page 层类型
                        area: ['700px', '600px'],
                        title: 'Playbook详情',
                        scrollbar: false,
                        maxmin: true, // 允许全屏最小化
                        content: '/scripts/' + obj.data.id,
                        end: function () {
                            // 在这里重载表格
                            layui.table.reload('test'); // 'test' 是你 table.render({ elem: "#test" }) 中的 elem ID
                        }
                    });

                }
            })

            table.render({
                elem: "#test",
                {#id: 'reload',#}
                url: '{% url 'playbook:get_playbook_list_api' %}',
                page: true, // 是否显示分页
                limits: [5, 10, 50, 100, 200],
                limit: 5,// 每页默认显示的数量

                toolbar: `
                <div>
                <button type="button" id="left_toolbar_create_playbook"  lay-event="left_toolbar_create_playbook" class="layui-btn layui-btn-sm">添加脚本</button>

                <button type="button" id="left_toolbar_delete_playbook"  lay-event="left_toolbar_delete_playbook" class="layui-btn layui-btn-sm layui-bg-red">批量删除</button>

                </div>

                `,
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {
                        field: 'name',
                        title: '脚本名称'
                    },
                    {
                        field: 'description',
                        title: '描述',

                    },
                    {
                        field: 'created_at',
                        title: '创建时间'
                    },
                    {
                        field: 'updated_at',
                        title: '更新时间'
                    },
                    {
                        field: 'script_type',
                        title: '脚本类型'
                    },
                    {
                        title: "操作",
                        templet: function (d) {
                            // d 是当前行的数据对象，d.id 就是主键
                            return `
                                 <button lay-event="delete" class="layui-btn layui-bg-red layui-btn-xs">删除</button>
                                <button lay-event="update"  class="layui-btn layui-bg-blue layui-btn-xs">编辑</button>

                                <button lay-event="detail"  class="layui-btn layui-btn-xs">详情</button>
                            `
                        }
                    }
                ]]
            })
            // 创建Playbook
            table.on('toolbar(test)', function (obj) {

                console.log(obj.event)
                if (obj.event == 'left_toolbar_create_playbook') {
                    layer.open({
                        type: 2, // page 层类型
                        area: ['700px', '600px'],
                        title: '创建Playbook',
                        scrollbar: false,
                        maxmin: true, // 允许全屏最小化
                        content: '{% url 'playbook:edit_code' %}',
                        end: function () {
                            // 在这里重载表格
                            layui.table.reload('test'); // 'test' 是你 table.render({ elem: "#test" }) 中的 elem ID
                        }
                    });
                }
                if (obj.event == 'left_toolbar_delete_playbook') {
                    var id = obj.config.id;
                    var checkStatus = table.checkStatus(id);
                    let list = checkStatus.data
                    let selectedIds = []
                    for (let i = 0; i < list.length; i++) {
                        selectedIds.push(list[i].id)
                    }
                    if (selectedIds.length > 0) {
                        // 确认删除
                        layer.confirm('确定要删除选中的 ' + selectedIds.length + ' playbook吗？', {
                            icon: 3,
                            title: '批量删除确认',
                            btn: ['确定删除', '取消']
                        }, function (index) {
                            // 发送AJAX请求
                            $.ajax({
                                url: '{% url "playbook:batch_delete_playbook_api" %}',
                                type: 'POST',
                                data: {
                                    'playbook_ids[]': selectedIds,
                                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                                },
                                success: function (response) {
                                    if (response.status === 'success') {
                                        layer.msg(response.message, {icon: 1});
                                        // 刷新表格
                                        layui.table.reload('test');

                                    } else {
                                        layer.msg(response.message, {icon: 2});
                                    }
                                },
                                error: function () {
                                    layer.msg('删除请求失败', {icon: 2});
                                }
                            });
                            layer.close(index);
                            layui.table.reload('test');
                        });
                    } else {
                        layer.msg('未选择Playbook', {icon: 2});
                    }

                }
            })

            // 搜索
            form.on('submit(table-search)', function (data) {
                var field = data.field; // 获得表单字段
                console.log(field)
                // 执行搜索重载
                table.reload('test', {
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    },
                    where: field // 搜索的字段
                });
                {#layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');#}
                return false; // 阻止默认 form 跳转
            });

        })
    </script>


    <script>

    </script>
{% endblock %}